<template>
  <div id="app">
    <div v-show="!this.$route.name">
      <headerTitle></headerTitle>
      <div class="tab">
        <router-link tag="li" active-class="active" to="/index"
          >推荐</router-link
        >
        <router-link tag="li" active-class="active" to="/singer"
          >歌手</router-link
        >
        <router-link tag="li" active-class="active" to="/recommend"
          >排行</router-link
        >
        <router-link tag="li" active-class="active" to="/search"
          >搜索</router-link
        >
      </div>
    </div>
    <div><router-view></router-view></div>
  </div>
</template>

<script>
import headerTitle from "./components/header/header.vue";

export default {
  name: "App",
  components: {
    headerTitle,
  },
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
}
.tab {
  display: flex;
  justify-content: space-around;
  color: gray;
  width: 100vw;
  background: #222222;
  height: 35px;
  list-style: none;
}
.active {
  color: gold;
  border-bottom: gold solid 3px;
}
</style>
